<style>
.{{$t|escape:'html'}}_text {
  width: 290px;
}
.{{$t|escape:'html'}}_main {
  vertical-align: top;
  border: 1px solid #aaaaaa;
  border-top: none;
  background-color: #eeeeee;
}
.{{$t|escape:'html'}}_nav {
  width: 1026px;
}
.{{$t|escape:'html'}}_nav td.tab {
  width: 100px;
  font-size: 16px;
  font-family: Lucida Sans Unicode;
  padding: 5px 10px;
  border: 1px solid #aaaaaa;
  cursor: pointer;
}
.{{$t|escape:'html'}}_nav td.tab:hover {
  background-color: #eeeeee;
}
.{{$t|escape:'html'}}_nav td.hi {
  font-weight: bold;
  border-bottom: none;
  background-color: #eeeeee;
}
.{{$t|escape:'html'}}_nav td.empty {
  border-bottom: 1px solid #aaaaaa;
}
.{{$t|escape:'html'}}_subtitle {
  font-size: 14px;
  font-family: Lucida Sans Unicode;
  padding: 10px 2px 0 0;
  font-weight: bold;
}
.{{$t|escape:'html'}}_code {
  font-family: Helvetica, Geneva, Arial, Verdana, sans-serif;
  letter-spacing: 0.5px;
  border: none;
  width: 1024px; 
  resize: vertical;
}
</style>
<table class="{{$t|escape:'html'}}_nav" cellPadding=0 cellSpacing=0>
  <tr>
    <td id="{{$t|escape:'html'}}_visual_tab" class="tab hi" onclick="_md = 0;switch_mode();">Visual</td>
    <td id="{{$t|escape:'html'}}_html_tab" class="tab" onclick="_md = 1;switch_mode();" style="border-left: none;">HTML</td>
    <td id="{{$t|escape:'html'}}_preview_tab" class="tab" onclick="_md = 2;switch_mode();" style="border-left: none;">Preview</td>
    <td class="empty"></td>
  </tr>
</table>
<table width="100%" cellPadding=0 cellSpacing=0>
  <tr>
    <td class="{{$t|escape:'html'}}_main">
      <div id="{{$t|escape:'html'}}_visual_div">
        <textarea id="{{$t|escape:'html'}}_content" name="{{$t|escape:'html'}}_content" rows="15" cols="80" style="width: 1024px; height:700px"></textarea>
      </div>
      <div id="{{$t|escape:'html'}}_html_div" style="display: none;">
        <textarea id="{{$t|escape:'html'}}_html" class="{{$t|escape:'html'}}_code" rows="15" cols="80" style="height:600px;"></textarea>
        <div class="{{$t|escape:'html'}}_subtitle" style="font-weight: normal;padding-left: 0;">&ltstyle&gt</div>
        <textarea id="{{$t|escape:'html'}}_css" class="{{$t|escape:'html'}}_code" rows="15" cols="80" style="height:120px;"></textarea>
        <div class="{{$t|escape:'html'}}_subtitle" style="font-weight: normal;padding-left: 0;padding-top: 0;">&lt/style&gt</div>
        <div class="{{$t|escape:'html'}}_subtitle" style="font-weight: normal;padding-left: 0;">&ltscript type="text/javascript"&gt</div>
        <textarea id="{{$t|escape:'html'}}_js" class="{{$t|escape:'html'}}_code" rows="15" cols="80" style="height:120px;"></textarea>
        <div class="{{$t|escape:'html'}}_subtitle" style="font-weight: normal;padding-left: 0;padding-top: 0;padding-bottom: 10px;">&lt/script&gt</div>
      </div>
      <div id="{{$t|escape:'html'}}_preview_div" style="display: none;"></div>
    </td>
    <td style="vertical-align: top;">
      <table width="320px" style="margin-left: 10px;border: thick solid #cccccc" cellPadding="5">
        <tr>
          <td style="font-weight: bold;">Page Name</td>
        </tr>
        <tr>
          <td><input id="{{$t|escape:'html'}}_name" class="{{$t|escape:'html'}}_text" type="text" value="{{if !empty($menus)}}{{$menus[0]->name|escape:html}}{{/if}}"></input></td>
        </tr>
        <tr>
          <td style="font-weight: bold;">Description</td>
        </tr>
        <tr>
          <td><textarea id="{{$t|escape:'html'}}_desc" class="{{$t|escape:'html'}}_text" type="text">{{if !empty($menus)}}{{$menus[0]->desc|escape:html}}{{/if}}</textarea></td>
        </tr>
        <tr>
          <td style="font-weight: bold;">Key Words</td>
        </tr>
        <tr>
          <td><textarea id="{{$t|escape:'html'}}_keywords" class="{{$t|escape:'html'}}_text" type="text">{{if !empty($menus)}}{{$menus[0]->keywords|escape:html}}{{/if}}</textarea></td>
        </tr>
        <tr>
          <td>
            <span class="image_button" style="width: 130px;margin-left: 0;" onclick="save(1);">
              <table>
                <tr>
                  <td><img src="image/btn/save_quit.png"></img></td>
                  <td>{{t escape='html'}}Save & Exit{{/t}}</td>
                </tr>
              </table>
            </span>
            <span class="image_button" style="width: 130px;margin-left: 0;" onclick="save(0);">
              <table>
                <tr>
                  <td><img src="image/btn/save24.png"></img></td>
                  <td>{{t escape='html'}}Save{{/t}}</td>
                </tr>
              </table>
            </span>
          </td>
        </tr>
      </table>
    </td>
    <td width="100%"></td>
  <tr>
  <tr>
    <td>
      <div style="margin: 10px 0;padding: 5px 0;background-color: #cccccc;">
        <table> 
          <tr>
            <td style="width: 20px;"></td>
            <td><select id="{{$t|escape:'html'}}_plugins" style="height: 25px;"/></select></td>
            <td>
              <span class="image_button" style="width: 80px;" onclick="add_plugin();">
                <table>
                  <tr>
                    <td><img src="image/btn/add.png"></img></td>
                    <td>{{t escape='html'}}Add{{/t}}</td>
                  </tr>
                </table>
              </span>
            </td>
          </tr>
        </table>
      </div>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>
      <script type="text/javascript">
        <!--
          function updateHeight() {
            iframe = document.getElementById('{{$t|escape:'html'}}_instances');
            var boh = iframe.contentDocument.body.offsetHeight;
            var bsh = iframe.contentDocument.body.scrollHeight;
            iframe.height = Math.max(Math.max(boh, bsh) + 100, 300);
//            iframe.height = Math.max(boh + 100, 300);
          }
        // -->
      </script>
      <iframe id="{{$t|escape:'html'}}_instances" onload="Javascript:updateHeight();" scrolling="no" width="100%" frameborder="0"  marginwidth="0" marginheight="0" allowtransparency="true" src="admin.php?path=admin&b=baseblank&t=instances&m={{$menu_id|escape:'html'}}"></iframe>
    </td>
    <td></td>
  </tr>
</table>

{{*/* Javascript */*}}
<script type="text/javascript" src="libs/tiny_mce/tiny_mce.js"></script>
<script src="jsrequest.php?script={{$t|escape:'html'}}" type="text/javascript"></script>
<script type="text/javascript">
  <!--
    if (document.addEventListener) {
      document.addEventListener('DOMContentLoaded', init, false);
    }
    window.onload = init;
    
    var _md = '{{$md|escape:'javascript'}}';
    var _premd = _md;
    var _pages = JSON.parse('{{$pages|@json_encode|escape:'javascript'}}');
    var _page = (_pages.length > 0) ? _pages[0] : pz_page.instance();
    var _menus = JSON.parse('{{$menus|@json_encode|escape:'javascript'}}');
    var _plugins = JSON.parse('{{$plugins|@json_encode|escape:'javascript'}}');
    var _instances = JSON.parse('{{$instances|@json_encode|escape:'javascript'}}');
    var _instance;
    
    function init() {
      if (!document.getElementById || !document.createElement || !arguments || arguments.callee._loaded) {
        return;
      }
      arguments.callee._loaded = true;

      _instance = pz_plugin_instance.instance();
      _instance.width = 1000;
      _instance.height = 500;
      _instance.scrolling = 0;
      _instance.menu_id = '{{$menu_id|escape:'javascript'}}';
      
      {{if $md == 0}}
      var elm = document.getElementById('{{$t|escape:'html'}}_content');
      DOMUtils.removeChildElements(elm);
      elm.appendChild(document.createTextNode(_page.html));
      setTinyMCE();
      {{/if}}
      setPlugins();
    }
    
    function setTinyMCE() {
      // Display
      tinyMCE.init( {
        // General options
        mode : "exact",
        elements : "page_content",
        theme : "advanced",

        plugins : "pdw,filebrowser,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",
        // Theme options
        theme_advanced_buttons1 : "pdw_toggle,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor,|,image,media",
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,anchor,cleanup,help,code,|,insertdate,inserttime,preview",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        file_browser_callback : 'filebrowser',
        pdw_toggle_on : "1",
        pdw_toggle_toolbars : "2,3,4",

        // Example content CSS (should be your site CSS)
        content_css : "css/content.css",
        theme_advanced_font_sizes : "10px,12px,13px,14px,16px,18px,20px,22px,24px,26px,28px,30px",
        font_size_style_values : "10px,12px,13px,14px,16px,18px,20px,22px,24px,26px,28px,30px",
        width : '1024px',
        height : '700px',

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/lists/template_list.js",
        external_link_list_url : "js/lists/link_list.js",
        external_image_list_url : "js/lists/image_list.js",
        media_external_list_url : "js/lists/media_list.js",
        // Style formats
        style_formats : [ {
          title : 'Bold text',
          inline : 'b'
        }, {
          title : 'Red text',
          inline : 'span',
          styles : {
            color : '#ff0000'
          }
        }, {
          title : 'Red header',
          block : 'h1',
          styles : {
            color : '#ff0000'
          }
        }, {
          title : 'Example 1',
          inline : 'span',
          classes : 'example1'
        }, {
          title : 'Example 2',
          inline : 'span',
          classes : 'example2'
        }, {
          title : 'Table styles'
        }, {
          title : 'Table row 1',
          selector : 'tr',
          classes : 'tablerow1'
        } ],

        // Replace values for the template 
        template_replace_values : {
          username : "Some User",
          staffid : "991234"
        }
      });
    }
    
    function setPlugins() {
      var elm = document.getElementById('{{$t|escape:'html'}}_plugins');
      for (var idx in _plugins) {
        var obj = _plugins[idx];
        var op = new Option(obj.name);
        op._id = obj.id;
        elm.options[elm.options.length] = op;
      }
      if (_plugins.length > 0) {
        _instance.plugin_id = _plugins[0].id;
      }
      
      elm.onchange = function() {
        _instance.plugin_id = this.options[this.selectedIndex]._id;
      };
    }
    
    function save(is_exit) {
      if (_md == 0) {
        _page.html = tinyMCE.get('{{$t|escape:'html'}}_content').getContent();
      }
      _page.menu_id = '{{$menu_id|escape:'javascript'}}';
      
      _menus[0].name = document.getElementById('{{$t|escape:'html'}}_name').value;
      _menus[0].desc = document.getElementById('{{$t|escape:'html'}}_desc').value;
      _menus[0].keywords = document.getElementById('{{$t|escape:'html'}}_keywords').value;
        
      new RequestUtils()._write(JSON.stringify( [ {
        n : 'pz_page',
        a : [ _page ],
        r : []
      }, {
        n : 'pz_menu',
        a : [ _menus[0] ],
        r : []
      } ]), function(result, params) {
        if (is_exit) {
          location.href = 'admin.php?t=pages';
        } else {
          location.reload();
        }
      }, {
        pos : DOMUtils.findPos(this)
      });
    }
    
    function add_plugin() {
      new RequestUtils()._write(JSON.stringify( [ {
        n : 'pz_plugin_instance',
        a : [ _instance ],
        r : []
      } ]), function(result, params) {
        location.reload();
      }, {
        pos : DOMUtils.findPos(this)
      });
    }
    
    function switch_mode() {
      var vdiv, hdiv, pdiv, vtab, htab, ptab;
      vdiv = document.getElementById('{{$t|escape:'html'}}_visual_div');
      hdiv = document.getElementById('{{$t|escape:'html'}}_html_div');
      pdiv = document.getElementById('{{$t|escape:'html'}}_preview_div');
      vtab = document.getElementById('{{$t|escape:'html'}}_visual_tab');
      htab = document.getElementById('{{$t|escape:'html'}}_html_tab');
      ptab = document.getElementById('{{$t|escape:'html'}}_preview_tab');
      
      if (_md == 0) {
        vdiv.style.display = 'block';
        hdiv.style.display = 'none';
        pdiv.style.display = 'none';
        vtab.className = 'tab hi';
        htab.className = 'tab';
        ptab.className = 'tab';
        
        tinyMCE.get('{{$t|escape:'html'}}_content').setContent(_page.html);
        var elm = document.getElementById('{{$t|escape:'html'}}_content');
      } else if (_md == 1) {
        _page.html = tinyMCE.get('{{$t|escape:'html'}}_content').getContent();
        
        hdiv.style.display = 'block';
        vdiv.style.display = 'none';
        pdiv.style.display = 'none';
        htab.className = 'tab hi';
        vtab.className = 'tab';
        ptab.className = 'tab';
        
        var html, css, js;
        html = document.getElementById('{{$t|escape:'html'}}_html');
        css = document.getElementById('{{$t|escape:'html'}}_css');
        js = document.getElementById('{{$t|escape:'html'}}_js');
        DOMUtils.removeChildElements(html);
        DOMUtils.removeChildElements(css);
        DOMUtils.removeChildElements(js);
        html.appendChild(document.createTextNode(_page.html));
        css.appendChild(document.createTextNode(_page.css));
        js.appendChild(document.createTextNode(_page.js));
        html.onchange = function() {
          _page.html = this.value;
        };
        css.onchange = function() {
          _page.css = this.value;
        };
        js.onchange = function() {
          _page.js = this.value;
        };
      } else if (_md == 2) {
        if (_premd == 0) {
          _page.html = tinyMCE.get('{{$t|escape:'html'}}_content').getContent();
        } else if (_premd == 1) {
          tinyMCE.get('{{$t|escape:'html'}}_content').setContent(_page.html);
          var elm = document.getElementById('{{$t|escape:'html'}}_content');
        }
        
        new RequestUtils()._custom('preview', JSON.stringify(_page), function(result, params) {
          pdiv.style.display = 'block';
          hdiv.style.display = 'none';
          vdiv.style.display = 'none';
          ptab.className = 'tab hi';
          htab.className = 'tab';
          vtab.className = 'tab';
          
          DOMUtils.removeChildElements(pdiv);
          var elm = document.createElement('iframe');
          elm.style.border = 'none';
          elm.scrolling = 'auto';
          elm.width = '1024px';
          elm.height = '700px';
          elm.frameborder = '0';
          elm.marginwidth = '0';
          elm.marginheight = '0';
          elm.allowtransparency = '0';
          elm.src = 'preview.php?i={{$menu_id|escape:html}}';
          pdiv.appendChild(elm);
        }, {
          php: 'custom.php',
          pos : DOMUtils.findPos(document.getElementById('{{$t|escape:'html'}}_preview_tab'))
        });
      }
      _premd = _md;
    }
  // -->
</script>
